<template>
    <div class="session d-flex">
        <div class="active">
            <div class="active_title">最新动态</div>
            <div class="active_text pt-4">定期举办线上、线下的技术沙龙、培训、会议</div>
        </div>
        <el-row :gutter="data.gutter">
            <el-col :span="data.span" v-for="item in data.cardContentList">
                <ActivityCard :content="item" :cardHight="data.cardHight" :cardBorderRadio="data.cardBorderRadio"/>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
    import { reactive } from "vue";
    import ActivityCard from '@/components/ActivityCard.vue'

    const data = reactive({
        gutter: 40, //列之间的间隔
        span: 12, // 列数，24/span=列数，例如24/12=2即每行两列
        cardBorderRadio: 20,
        cardHight: 270,
        cardContentList: [
            {
                'title': '【版本发布】不良资产数据仓库v1.0版本发布',
                'text': '11月20日下午14点30-16点00，不良资产数据仓库v1.0版本发布',
                'date': '2023-11-20'
            },
            {
                'title': '【启动开发】不良资产数据仓库项目正式进入开发阶段',
                'text': '10月13日，不良资产数据仓库项目正式进入开发阶段，预计开发一个月',
                'date': '2023-10-13'
            },
        ]
    })
</script>
<style scoped>
    .session {
        padding: 72px 72px 64px 72px;
    }
    .active {
        width: 24.3%;
        padding-right: 30px;
    }
    .active_title {
        color: #111A05;
        font-size: 28px;
        font-weight: 600;
        line-height: 48px;
    }
    .active_text {
        color: #111A05;
        font-size: 16px;
        font-weight: 400;
        line-height: 28px;
    }
</style>